<template>
  <div id="app">
    <el-header>
      <div class="header-content">
        <h1 class="title">公租房租赁平台</h1>
        <div class="auth-buttons">
          <el-button
            v-if="!$store.state.isLogin"
            @click="$router.push('/login',()=>{},()=>{})"
            type="text"
          >登录</el-button>
          <p v-else>欢迎您，{{ this.$store.state.loginTenant.account }}</p>
          <el-button
            v-if="!$store.state.isLogin"
            @click="$router.push('/register',()=>{},()=>{})"
            type="text"
          >注册</el-button>
          <el-button v-else @click="logout" type="text">登出</el-button>
        </div>
      </div>
    </el-header>
    <el-main>
      <div class="main-content">
        <el-carousel height="600px" class="carousel">
          <el-carousel-item v-for="image in 6" :key="image">
            <img :src="require(`@/assets/xuanchuan${image}.jpg`)" class="carousel-image" />
          </el-carousel-item>
        </el-carousel>
        <div class="side-menu">
          <el-menu>
            <el-menu-item index="1" @click="$router.push('/search',()=>{},()=>{})">
              <i class="el-icon-house"></i>
              房屋查询
            </el-menu-item>
            <el-menu-item index="2" @click="$router.push('/userInfo',()=>{},()=>{})">
              <i class="el-icon-user"></i>
              个人中心
            </el-menu-item>
            <el-menu-item index="3" @click="$router.push('/message',()=>{},()=>{})">
              <i class="el-icon-message"></i>
              消息中心
            </el-menu-item>
          </el-menu>
        </div>
      </div>
    </el-main>
  </div>
</template>
  
  <script>
export default {
  name: "App",
  data() {
    return {};
  },
  mounted() {
    this.showNotify();
  },
  methods: {
    showNotify() {
      if (this.$store.state.isLogin) {
        this.$axios
          .post("message/get", {
            tenant: this.$store.state.loginTenant.account,
            status: "未读"
          })
          .then(response => {
            response.data.data.forEach(message => {
              this.$notify.info({
                title: `您收到了一条新消息`,
                dangerouslyUseHTMLString: true,
                message: `<strong>${message.title}</strong><br><p style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 250px;">${message.content}`,
                duration: 20000,
                onClick: () => {
                  this.$router.push(
                    "/message",
                    () => {},
                    () => {}
                  );
                }
              });
            });
          })
          .catch(error => {
            console.log(error);
          });
      }
    },
    logout() {
      this.$confirm("确定要退出登录吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$store.commit("setIsLogin", false);
          this.$store.commit("setLoginTenant", null);
          this.$router.push(
            "/login",
            () => {},
            () => {}
          );
        })
        .catch(() => {});
    }
  }
};
</script>
  
  <style scoped>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.title {
  font-size: 30px;
  font-weight: bold;
}

.auth-buttons {
  display: flex;
  gap: 10px;
}

.main-content {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

.carousel {
  width: 80%;
}

.carousel-image {
  width: 100%;
  height: 600px;
  object-fit: cover;
}

.side-menu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 600px;
  width: 25%;
}

.el-menu-item {
  height: 200px;
  line-height: 200px;
  font-size: 20px;
}

.el-menu-item [class^="el-icon-"] {
  font-size: 50px;
  width: 80px;
}
</style>
  